<template>
    <div class="carManager">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    代理商管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="handle-box">
                <el-button
                        type="primary"
                        icon="el-icon-search"
                        @click="addVisible = true"
                        class="tianjia">添加
                </el-button>
            </div>

            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column type="index" width="55" align="center" label="序号" class-name="table"></el-table-column>
                <el-table-column prop="agentName" label="代理商" width="120" class-name="table"></el-table-column>
                <el-table-column prop="agentUsername" label="用户名" width="120" class-name="table"></el-table-column>
                <el-table-column prop="agentPassword" label="密码" width="120" class-name="table"></el-table-column>
                <el-table-column prop="agentPhone" label="手机号" width="120" class-name="table"></el-table-column>
                <el-table-column prop="agentTel" label="座机" width="120" class-name="table"></el-table-column>
                <el-table-column prop="agentCompanyname" label="公司名" width="120" class-name="table"></el-table-column>
                <el-table-column prop="agentEmail" label="邮箱" class-name="table"></el-table-column>
                <el-table-column prop="agentQq" label="QQ" class-name="table"></el-table-column>
                <el-table-column prop="agentWechat" label="微信" width="180" class-name="table"></el-table-column>
                <el-table-column prop="agentDivide" label="利润比例" width="180" class-name="table"></el-table-column>
                <el-table-column prop="roleName" label="权限" width="100" class-name="table"></el-table-column>
                <el-table-column label="操作" width="180" align="center" class-name="table">

                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- :current-page 当前页       :page-size 每页显示条数    :total 总条数   -->
            <div class="pagination">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="cur_page"
                        :page-size="pagesize"
                        :total="totalRecords"
                        :page-sizes="[5, 10, 20, 40]"
                        layout="total, sizes, prev, pager, next, jumper"></el-pagination>

            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="editForm" :model="editForm" label-width="100px" :rules="editFormRules">
                <el-form-item label="姓名" prop="agentName">
                    <el-input v-model="editForm.agentName"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="agentUsername">
                    <el-input v-model="editForm.agentUsername" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="agentPassword">
                    <el-input v-model="editForm.agentPassword"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="agentPhone">
                    <el-input v-model="editForm.agentPhone"></el-input>
                </el-form-item>
                <el-form-item label="座机" prop="agentTel">
                    <el-input v-model="editForm.agentTel"></el-input>
                </el-form-item>
                <el-form-item label="公司名" prop="agentCompanyname">
                    <el-input v-model="editForm.agentCompanyname"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="agentEmail">
                    <el-input v-model="editForm.agentEmail"></el-input>
                </el-form-item>
                <el-form-item label="QQ" prop="agentQq">
                    <el-input v-model="editForm.agentQq"></el-input>
                </el-form-item>
                <el-form-item label="微信" prop="agentWechat">
                    <el-input v-model="editForm.agentWechat"></el-input>
                </el-form-item>

                <el-form-item label="利润比例" prop="agentDivide">
                    <el-input v-model="editForm.agentDivide"></el-input>
                </el-form-item>
                <el-form-item label="权限" prop="roleId">
                    <el-select v-model="editForm.roleId" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 添加弹出框 -->
        <el-dialog title="添加" :visible.sync="addVisible" width="30%">
            <el-form ref="addForm" :model="addForm" label-width="100px" :rules="FormRules">
                <el-form-item label="代理商" prop="agentName">
                    <el-input v-model="addForm.agentName"></el-input>

                </el-form-item>

                <el-form-item label="用户名" prop="agentUsername">
                    <el-input v-model="addForm.agentUsername"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="agentPassword">
                    <el-input v-model="addForm.agentPassword"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="agentPhone">
                    <el-input v-model="addForm.agentPhone"></el-input>
                </el-form-item>
                <el-form-item label="座机" prop="agentTel">
                    <el-input v-model="addForm.agentTel"></el-input>
                </el-form-item>
                <el-form-item label="公司名" prop="agentCompanyname">
                    <el-input v-model="addForm.agentCompanyname"></el-input>
                </el-form-item>
                <el-form-item label="微信" prop="agentWechat">
                    <el-input v-model="addForm.agentWechat"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="agentEmail">
                    <el-input v-model="addForm.agentEmail"></el-input>
                </el-form-item>
                <el-form-item label="QQ" prop="agentQq">
                    <el-input v-model="addForm.agentQq"></el-input>
                </el-form-item>

                <el-form-item label="利润比例" prop="agentDivide">
                    <el-input v-model="addForm.agentDivide"></el-input>
                </el-form-item>
                <el-form-item label="权限" prop="roleIdList">
                    <el-select v-model="addForm.roleIdList" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 添加弹出框 结束-->
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，并且影响相关联的用户，权限以及员工，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRow">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>


    export default {
        name: "carManager",
        data() {
            return {
                options: [],
                value: "",
                tableData: [],
                cur_page: 1,  //当前页
                pagesize: 20,  // 每页显示条数
                totalRecords: 0,
                totalPages: 0,
                agentNames: [], // 代理商名字下拉框
                multipleSelection: [],
                select_cate: "",
                select_word: "",
                del_list: [],
                is_search: false,
                editVisible: false,
                addVisible: false,
                delVisible: false,
                editForm: {
                    agentId: "",
                    agentUsername: "",
                    agentPassword: "",
                    agentName: "",
                    agentPhone: "",
                    agentTel: "",
                    agentCompanyname: "",
                    agentEmail: "",
                    agentQq: "",
                    roleId: "",
                    agentWechat: "",
                    agentState: "",
                    agentDivide: ""
                },
                FormRules: {
                    roleIdList: [
                        {message: "权限不能为空", required: true, trigger: "blur"}
                    ]
                },
                editFormRules: {
                    roleId: [{message: "权限不能为空", required: true, trigger: "blur"}]
                },
                addForm: {
                    agentId: "",
                    agentUsername: "",
                    agentPassword: "",
                    agentName: "",
                    agentPhone: "",
                    agentTel: "",
                    agentCompanyname: "",
                    agentEmail: "",
                    roleIdList: "",
                    agentQq: "",
                    agentWechat: "",
                    agentState: "",
                    agentDivide: ""
                },
                idx: -1,
                id: -1
            };
        },
        created() {
            this.getData();
            this.getJur();
        },
        computed: {},
        methods: {
            // 获取权限数据
            getJur() {
                var res = this;
                var username = localStorage.ms_username;
                this.$axios({
                    url:
                        "/api/waterRole/findRoleListByPageAndAgentIdOrStaffId",
                    method: "post",
                    data: {
                        username: username,
                        pageNum: res.cur_page,  //当前页
                        pageSize: res.pagesize
                    }
                })
                    .then(function (response) {
                        if (response.status <= 200) {
                            for (var i = 0; i < response.data.data.list.length; i++) {
                                res.options.push({
                                    value: response.data.data.list[i].id,
                                    label: response.data.data.list[i].roleName
                                });
                            }
                        }
                    })
                    .catch(function (error) {
                    });
            },
            dateFormatterexpirationTime(row, column) {
                let datetime = row.expirationTime;
                if (datetime) {
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + "-";
                    let mon = datetime.getMonth() + 1 + "-";
                    let d = datetime.getDate();
                    return y + mon + d;
                }
                return "";
            },
            dateFormatter(row, column) {
                let datetime = row.joinTime;
                if (datetime) {
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + "-";
                    let mon = datetime.getMonth() + 1 + "-";
                    let d = datetime.getDate();
                    return y + mon + d;
                }
                return "";
            },
            //每页显示数改变
            handleSizeChange(val) {
                this.pagesize = val;
                this.getData();
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;  // 当前页
                this.getData();
            },

            // 获取 所有数据
            getData() {
                var res = this;
                this.$axios({
                    url: "/api/waterAgent/selectWaterAgentAll",
                    method: "post",
                    data: {pageNum: res.cur_page, pageSize: res.pagesize}
                })
                    .then(function (response) {
                        if (response.status <= 200) {
                            res.tableData = response.data.data.list; //显示的数据
                            res.totalRecords = response.data.data.total; //总条数
                        }
                    })
                    .catch(function (error) {
                        res.$message.error("查询失败: " + error);

                    });
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {
                this.idx = index;
                this.id = row.agentId;
                this.editForm = {
                    agentId: row.agentId,
                    agentName: row.agentName,
                    agentPhone: row.agentPhone,
                    agentUsername: row.agentUsername,
                    agentPassword: row.agentPassword,
                    agentTel: row.agentTel,
                    agentCompanyname: row.agentCompanyname,
                    agentEmail: row.agentEmail,
                    agentQq: row.agentQq,
                    agentWechat: row.agentWechat,
                    agentState: row.agentState,
                    roleId: row.roleId,
                    agentDivide: row.agentDivide
                };
                this.editVisible = true;
            },
            handleDelete(index, row) {
                this.idx = index;
                // console.log(row.agentId);
                this.id = row.agentId;
                this.delVisible = true;
            },
            delAll() {
                const length = this.multipleSelection.length;
                let str = "";
                this.del_list = this.del_list.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + " ";
                }
                this.$message.success("删除了" + str);
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 保存编辑
            saveEdit() {
                var res = this;
                var setData = this.editForm;
                // console.log(setData);
                this.$refs.editForm.validate(valid => {
                    if (!valid) {
                        res.$message.success("格式不正确");
                    } else {
                        this.$axios({
                            url: "/api/waterAgent/updateByPrimaryKey",
                            method: "post",
                            data: setData
                        })
                            .then(function (response) {
                                if (response.status <= 200) {
                                    res.editVisible = false;
                                    res.$message.success("修改成功");
                                    res.$message.success(`修改第 ${res.idx + 1} 行成功`);
                                    res.getData();
                                }
                            })
                            .catch(function (error) {
                                res.$message.success("修改失败！");
                            });
                    }

                    // 验证通过后的处理...
                });
            },
            // 添加
            saveAdd() {
                var res = this;
                var setData = this.addForm;

                this.$refs.addForm.validate(valid => {
                    if (!valid) {
                        res.$message.success("格式不正确");

                    } else {
                        this.$axios({
                            url: "/api/waterAgent/insertAgentAndRole",
                            method: "post",
                            data: setData
                        })
                            .then(function (response) {
                                if (response.status <= 200) {
                                    res.$message.success(response.data.message);
                                    res.addVisible = false;
                                    res.getData();
                                }
                            })
                            .catch(function (error) {
                                res.$message.error("添加失败！");

                            });
                    }
                });
            },
            // 确定删除
            deleteRow() {
                var res = this;
                var id = Number(res.id);
                this.$axios({
                    url: "/api/waterAgent/deleteAgainById/" + res.id,
                    method: "delete",
                    data: {}
                })
                    .then(function (response) {
                        if (response.status <= 200) {
                            res.$message.success("删除成功");
                            res.delVisible = false;
                            res.getData();
                        }
                    })
                    .catch(function (error) {
                        res.$message.success("查询失败！");
                    });
            }
        }
    };
</script>

<style scoped>
    .huizong {
        height: 30px;
        width: 400px;
        position: relative;
    }

    .huizong span {
        height: 30px;
        width: 400px;
        position: absolute;
        bottom: -60px;
        z-index: 999;
    }

    .tianjia {
        margin-left: 10px;
    }

    .sousuo {
        margin-right: 10px;
    }

    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .del-dialog-cnt {
        font-size: 16px;
        text-align: center;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .outup {
        font-size: 12px;
        color: #fff;
        background-color: #409eff;
        display: inline-block;
        border-radius: 3px;
        padding: 8px 15px;
        margin-left: 10px;
        margin-top: 3px;
    }

    .upload-demo {
        height: 30px;
        width: 100px;
        display: inline-block;
        margin-left: 10px;
    }

    .inup {
        margin-top: 10px;
    }
</style>
<style>
    .el-upload--text {
        width: 60px;
        height: 30px;
        display: inline-block;
        border: 0;
        overflow: visible;
    }

    .el-table--border {
        border: 1px solid black;
    }

    .el-table--border,
    .el-table--border th,
    .el-table td,
    .el-table th {
        border-right: 1px solid black;
        border-bottom-color: black;
        border-left-color: black;
    }

    .table {
        border-bottom-color: black !important;
        border-left-color: black !important;
    }
</style>
